<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Table of All Posible Input Within Size 4</title>

  <style>
    body {
      background-color: #1e1e1e;
      color: #dcdcdc;
    }

    #mainTable {
      margin:  1em auto;
      text-align: center;
    }


    #mainTable th {
      width: 6em;
    }

    #mainTable td,
    #mainTable th {
      border-bottom: 1px solid #fff;
    }

    #mainTable code:first-child{
      color: #dc5656;
    }

    #insertRows span:first-child {
      color: #569cd6;
    }

    #insertRows span:last-child {
      color: #b8d7a3;
    }
  </style>
</head>

<body>
  <table id="mainTable">
    <thead>
      <tr>
        <th><span style="color: #569cd6;">T</span> ; <span style="color: #b8d7a3;">L</span></th>
        <th><code>x</code><br><code>x</code></th>
        <th><code>0</code><br><code>0</code></th>
        <th><code>0</code><br><code>1</code></th>
        <th><code>0</code><br><code>2</code></th>
        <th><code>1</code><br><code>0</code></th>
        <th><code>1</code><br><code>1</code></th>
        <th><code>1</code><br><code>2</code></th>
      </tr>
    </thead>
    <tbody id="insertRows"> </tbody>
  </table>

  <script src="./iteratorTable_size4.js"></script>
  <script>
    const insertRows = document.getElementById('insertRows');

    const writeTd = (org, tail) => {
      let target = IT.find(e => e.R === (org.R.substr(1, 3) + tail.R) && e.B === (org.B.substr(1, 3) + tail.B));
      // console.log('writeTd : ', org, tail, target);
      return `<span>${target.T}</span> ; <span>${target.L}</span>`;
    }

    IT.filter(e => e.R[0] === '0' && e.B[0] === '0').forEach(e => {
      let tr = document.createElement("tr");
      tr.innerHTML = `
        <th><code>${e.R.substr(1, 3)}</code><br><code>${e.B.substr(1, 3)}</code></th>
        <td><span>${e.T}</span> ; <span>${e.L}</span></td>
        <td>${writeTd(e, { R: '0', B: '0' })}</td>
        <td>${writeTd(e, { R: '0', B: '1' })}</td>
        <td>${writeTd(e, { R: '0', B: '2' })}</td>
        <td>${writeTd(e, { R: '1', B: '0' })}</td>
        <td>${writeTd(e, { R: '1', B: '1' })}</td>
        <td>${writeTd(e, { R: '1', B: '2' })}</td>
      `;

      insertRows.appendChild(tr);
    });
  </script>
</body>

</html>